<template>
  <div class="layout-page">
    首页架子 - 内容区域
<!-- 写在layout导航  因为我们只想在这个页面显示  如果在app.vue里面的话就是所有组件都会显示了 -->
    底部tabbar - 区域
    <!-- 第五步  在需要显示的地方放进去我们的导航栏  修改样式-->
    <!--                             图标被激活时的颜色            其他图标颜色 -->
    <van-tabbar route v-model="active" active-color="#fa6d1d" inactive-color="#646566" >
      <!-- 根据官网给的图标名称进行修改 -->
      <!-- 用官网给的to方法  用法和routerlink一样的 -->
  <van-tabbar-item to='/article' icon="fire-o">面经</van-tabbar-item>
  <van-tabbar-item to='/collect' icon="star-o">收藏</van-tabbar-item>
  <van-tabbar-item to='/like' icon="like-o">喜欢</van-tabbar-item>
  <van-tabbar-item to='/user' icon="user-o">我的</van-tabbar-item>
</van-tabbar>
<!-- 此时在写二级路由的出口 -->
<router-view></router-view>
  </div>
  <!-- 因为每次刷新都会导致选中页面的图标变回第1个 这个不合适 查阅文档发现只要在标签添加上route开启路由模式就好了-->
  <!-- 注意不要加r  这个问题很关键 -->
</template>

<script>
export default {
  name: 'layout-page',
  // 控制台说active没有被定义  那我们给它暴露出来就好了
  data () {
    return {
      active: 0
    }
  }
}
</script>

<style lang="less" scoped></style>
